<script setup>
  import { computed } from 'vue'
  import Icon from '@/components/Icon.vue'

  const props = defineProps({
    file: Object,
    requirement: Object,
    node: Object,
  })

  const statusData = computed(() => {
    let cssClass = 'icon status'
    let cssTdClass = 'col_status'
    let statusTitle = ''
    let nodeIcon = false

    if (!props.requirement) {
      cssClass = ''
      cssTdClass += ' empty'

      return {
        cssClass: cssClass,
        cssTdClass: cssTdClass,
        statusTitle: statusTitle,
        nodeIcon: nodeIcon,
      }
    }

    const needsValidation = props.requirement.validation
    const validation_status = props.requirement.validation_status

    if (props.file && needsValidation) {
      if (validation_status == 'wait') {
        statusTitle = 'En attente de validation'
        nodeIcon = 'clock-circle'
        cssClass += ' caution'
      } else if (validation_status == 'valid') {
        statusTitle = 'Fichier validé'
        nodeIcon = 'check-circle'
        cssClass += ' success'
      } else if (validation_status == 'invalid') {
        statusTitle = "Le contenu de ce fichier n'est pas conforme"
        nodeIcon = 'times'
        cssClass += ' invalid'
      }
    } else if (props.file) {
      statusTitle = 'Fichier fourni'
      nodeIcon = 'check-circle'
      cssClass += ' success'
    } else if (props.requirement.requirement_type == 'optionnal') {
      statusTitle = 'Recommandation non satisfaite'
      nodeIcon = 'warning'
      cssClass += ' caution'
    } else {
      statusTitle = 'Obligation non satisfaite'
      nodeIcon = 'times'
      cssClass += ' invalid'
    }

    return {
      cssClass: cssClass,
      cssTdClass: cssTdClass,
      statusTitle: statusTitle,
      nodeIcon: nodeIcon,
    }
  })
</script>
<template>
  <td :class="statusData.cssTdClass" :title="statusData.statusTitle">
    <span :class="statusData.cssClass">
      <Icon :name="statusData.nodeIcon" v-if="statusData.nodeIcon" />
    </span>
  </td>
</template>
